<template>
  <div class="login-container pull-height" @keyup.enter.native="handleLogin" @contextmenu.prevent="rightShow()">

      <div id="task-bar">
          <ul class="task-window"> 
            <el-tag v-for="tag in tags" 
            @click="tagclick(tag)" 
            @close="closeTag(tag)"
            :key="tag.label" closable 
            :type="tag.clientId == currentTag.clientId ? 'success' : '' "> {{tag.label}} </el-tag>
          </ul>
        <ul class="task-panel">
            <el-dropdown placement="top-end">
              <el-button size="mini">
                {{userInfo.username}}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <!-- <el-dropdown-item @click.native="handleScreen">全屏</el-dropdown-item> -->
                <el-dropdown-item @click.native="editInfo">修改信息</el-dropdown-item>
                <el-dropdown-item @click.native="logout" divided>退出系统</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
        </ul>
      </div>
      <div id="desk">
        <ul>
          <li v-for="(item, index) in appList"   @click="openApp(item)" shortcut="0" :key="index" :title="item.label">
              <img src="../../assets/img/computer.png">
              <span>{{item.label}}</span><em></em>
          </li>
        </ul>
      </div>

      <el-dialog title="修改个人信息" :visible.sync="dialogFormVisible">
        <user-info></user-info>
      </el-dialog>

  </div>
</template>
<script>
import { openWindow , reqFullScreen } from "@/util/util";
import { validatenull } from "@/util/validate";
import { fetchAppList } from "@/api/app";
import { mapState, mapGetters } from "vuex";
import userInfo from "../user/info";

export default {
  name: "login",
  //mixins: [theme()],
  components: {
    userInfo
  },
  data() {
    return {
      appList:[//应用列表
        {
          "clientId": "dgcloud",
          "resourceIds": null,
          "clientSecret": "dgcloud",
          "scope": "server",
          "authorizedGrantTypes": "password,refresh_token,authorization_code",
          "webServerRedirectUri": null,
          "authorities": null,
          "accessTokenValidity": null,
          "refreshTokenValidity": null,
          "additionalInformation": null,
          "autoapprove": "0",
          "label": "东冠云智慧中枢系统",
          "icon": null,
          "path": "http://192.168.0.12:8080/Portal/home"
        }, {
          "clientId": "app",
          "resourceIds": null,
          "clientSecret": "app",
          "scope": "server",
          "authorizedGrantTypes": "password,refresh_token,authorization_code",
          "webServerRedirectUri": null,
          "authorities": null,
          "accessTokenValidity": null,
          "refreshTokenValidity": null,
          "additionalInformation": null,
          "autoapprove": "1",
          "label": "测试app",
          "icon": null,
          "path": "https://www.baidu.com"
        },

      ],
      tags: [],//标签
      window: {},//弹出窗体
      currentTag: {},//当前标签
      openWindowNum: 0,//调用打开窗体次数
      colseWindowCallBackNum: 0,//关闭窗体次数
      dialogFormVisible: false,
    };
  },
  created() {
  },
  mounted() {
  },  
  beforeDestroy() {
    this.cleanData();
    
  },
  computed: {
    //...mapGetters(["website"])
    ...mapState({
      userInfo: state => state.user.userInfo
    }),
    //计算样式
    deskLiStyle () {
      return function (index) {
        let top = 90 * (index % 10) + 20;
        let left = parseInt(index/10) * 90  + 20;
        return "left:"+left+"px;top:"+top+"px"
      }
    },
  },
  props: [],
  methods: {
    
    openApp(e){//应用图标点击打开应用
      if(!this.hasTag(e)){//此标签是否存在
        this.tagAdd(//不存在增加标签
          { label: e.label, clientId: e.clientId , type: '' ,path:e.path}
        );
      }
      this.openWindow(e,1100,800);
    },

    tagclick(e){//标签点击
      this.openWindow(e,1100,800);
    },

    closeTag(e){//关闭窗口和标签关闭点击
      if(validatenull(e)){//标签不存在
        return ;
      }
      this.tagDel(e);
      if(this.currentTag.clientId == e.clientId){
        this.currentTag = this.tags[[this.tags.length-1]];
      }
      if(!validatenull(this.currentTag)){
        this.openWindow(this.currentTag,1100,600);
      }else{
        //var windowObj = openWindow("https://www.baidu.com/","appWindow",1,1);
        this.window.close();
      }
    },

    tagAdd(tag){//标签添加
      this.tags.push(tag);
    },

    tagDel(tag){//标签删除
      this.tags.forEach((ele, num) => {
        if (ele.clientId === tag.clientId) {
          this.$delete(this.tags, num);
        }
      });
    },

    hasTag(tag){//判断是否存在此标签
      let flag = false;
      for (var i = 0; i < this.tags.length; i++) {
        if(this.tags[i].clientId === tag.clientId){
          flag = true;
          break;
        }
      }
      return flag;
    },

    openWindow(tag,width,height){//弹窗具体方法
      this.openWindowNum++;
      let _this = this;
      this.currentTag = { label: tag.label, clientId: tag.clientId , type: '' ,path:tag.path};
      let windowObj = openWindow(tag.path,"appWindow",width,height);
      this.window = windowObj;
      let loop = setInterval(function() { //监听窗口关闭 
          if(windowObj.closed) {
            _this.colseWindowCallBackNum++;
            if(_this.colseWindowCallBackNum !=0 && _this.colseWindowCallBackNum == _this.openWindowNum){
              _this.openWindowNum = 0;
              _this.colseWindowCallBackNum = 0;
              try{
                _this.closeTag(_this.currentTag);
              }catch (err){
                _this.$notify.error({
                  title: '错误',
                  message: '您的浏览器阻止了弹窗，无法完成部分功能，请在设置中开启',
                  duration: 0
                });
                console.log(err);
              }
            }
            clearInterval(loop); 
          }  
      }, 1000);
    },

    cleanData(){//清空弹窗和数据
      this.tags = [];
      this.currentTag = {};
      if(!validatenull(this.window)){
      this.window.close();
      }
    },

    logout(){//登出
      this.$confirm("您确认退出系统吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$store.dispatch("LogOut").then(() => {
          this.$router.push({ path: "/login" });
          this.cleanData();
        });
      });
    },

    rightShow(){//页面上右键

    },

    fetchAppList(){//查询应用列表
      fetchAppList(userInfo.userId).then(response => {
        this.appList = res
      });
    },

    editInfo(){//修改个人信息弹窗
      this.dialogFormVisible = true;
    },

    setScreen() {
      this.$store.commit("SET_FULLSCREN");
    },

    handleScreen() {//全屏
      reqFullScreen();
    },

  }
};
</script>

<style lang="scss">
.login-container::before {
  z-index: -999;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/img/menglong2.jpg");
  background-size: cover;
}
#task-bar{
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height:34px;
  overflow:hidden;
  border-top:1px solid #272C36;
  border-color:rgba(20, 20, 20, 0.8);
  background:#31323A;
  background:rgba(40, 40, 40, 0.9);
  opacity:0.9;
  filter:alpha(opacity=20)
}
.task-panel{
  position:absolute;
  top:0;
  right:0px;
  height:100%;
  overflow:hidden;
  float: left;
}
#desk{position:absolute;top:0;bottom:34px;width:100%;overflow:hidden;*z-index:2}
#desk ul{
  width:100%;
  height:100%;
  padding: 10px;
  margin-bottom:35px;
  /* overflow:hidden;
  position:absolute */
  /* border:solid 1px red; */
  display: flex;
  flex-direction: column ;
  flex-wrap: wrap;
  align-content: flex-start;
}
#desk ul li{
  width:80px;
  height:57px;
  padding:10px 0;
  margin-left: 20px;
  margin-top: 5px;
  text-align:center;
  transition-duration: 0.3s;
  transition-property: transform;
  /* position:absolute;
  cursor:pointer */
}
#desk ul li img{
  border-radius:3px 3px 3px 3px;
  display:block;
  height:40px;width:40px;
  margin:auto
}
#desk ul li span{
  background:none repeat scroll 0 0 rgba(0, 0, 0, 0.3);
  border-radius:10px 10px 10px 10px;
  filter:none;
  color:#fff;
  display:inline-block;
  height:20px;
  width:65px;
  line-height:20px;
  margin-top:5px;
  overflow:hidden;
  padding:0 8px;
  position:relative;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;z-index:1;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/ui/shortcut_text.png', sizingMethod='scale')
}
#desk ul li em{
  display:none;
  position:absolute;
  top:0;left:0;
  z-index:0;
  width:80px;
  height:77px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  background:#000;
  opacity:0.12;
  filter:alpha(opacity=12);
}
#desk ul li:hover {
  /* display:block; */
  opacity:0.6;
  filter:alpha(opacity=60); 
  cursor:pointer;
  //transform: translateY(-5px);
}
#desk ul li::before{        
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  height: 10px;
  width: 100%; 
}
/* #desk ul li.hover em{display:block}
#desk ul li.focus em{display:block;opacity:0.25;filter:alpha(opacity=25)} */

/*标签（状态栏）*/
.el-tag{
    margin-left: 5px;
    cursor:pointer;
  }
</style>
